<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <!-- template是h5新标签 它作为html模板不显示 但是可以作为节点使用. vuejs.org -->
    <template id="content">
       <h1> 这是一个模板 content</h1>
    </template>
    <script>
        const app=Vue.createApp({
            //设置模板字符串
            // template:`<h1>今天广州还是阳光灿烂的日子</h1>`,
            // render(){//渲染函数
            //     //Vue.h()函数 手动创建虚拟机vnode render渲染函数的返回结果
            //     //会渲染到网页.
            //     //Vue.h('节点名称',{节点属性列表},"子节点")
            //     return Vue.h("h1",{style:'color:red;'},"广州还没有降温的趋势??");
            // },
            // 如果渲染函数render和模板字符串同时设置.那么render的优先级更高.
            // template 里面模板内容也会编译成虚拟节点 然后在渲染到页面
            //template的值如果是一个#开头的选择器 ，那么vue获取节点里面内容并编译渲染到挂载点
            template:"#content"
            // render(){
                //render渲染函数 也支持jsx语法 但是需要插件支持.@vue/babel-jsx-plugin插件
                //后面讲构建工具的时候在讲.
            // }
        });
        app.mount("#app");
    </script>
</body>
</html>